<template>
  <div ref="el" class="box">
    <el-select v-model="value" class="m-2" placeholder="Select" size="large" :teleported="false">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-button @click="toggle">全屏</el-button>
  </div>
</template>

<script setup>
const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

import { useFullscreen } from '@vueuse/core'
const el = ref(null)
const { toggle } = useFullscreen(el)
</script>

<style scoped lang="scss">
.box {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

::v-deep(.el-select__popper) {
  left: 0 !important;
}
</style>
